import React,{Component} from 'react'
import * as pub from '../../config/public';
import * as fetch from '../../config/fetch';
//import Switch, {Case,Default} from 'react-switch-case';
import $ from 'jquery'
// import Layer from '../Layer'
import {message} from 'antd'
import {browserHistory} from 'react-router'
class SingleQuestion extends Component {
	constructor(args) {
		super();
	}
	delThis(number){
		$('#SingleQuestion' + number).remove();
	}
	render(){
		return(
			<div className="topic-cont SingleQuestion" id={'SingleQuestion' + this.props.number}>
				<h5><label>
				题目</label>
				<p required="required" className="question" style={{fontSize:'14px'}}></p></h5>
				<dl className="clearFix mar-t-20">
					<dt>选项</dt>
					<dd>
						<ul>
							<li><label>A</label><p required="required" className="describeA angwerCss"></p></li>
							<li><label>B</label><p required="required" className="describeB angwerCss"></p></li>
							<li><label>C</label><p required="required" className="describeC angwerCss"></p></li>
							<li><label>D</label><p required="required" className="describeD angwerCss"></p></li>
						</ul>
					</dd>
				</dl>
				<dl className="clearFix mar-t-20">
					<dt>答案</dt>
					<dd><label>
					<input  required="required" type="radio" name={'single_answer'+this.props.number}/>A</label><label>
					<input  type="radio" name={'single_answer'+this.props.number}/>B</label><label>
					<input  type="radio" name={'single_answer'+this.props.number}/>C</label><label>
					<input  type="radio" name={'single_answer'+this.props.number}/>D</label></dd>
				    {/*<a className='delete-question' onClick={()=>this.delThis(this.props.number)}><i className='icon-trash'></i></a>*/}
				</dl>
			</div>
			)
	}
}
class MultipleQuestion extends Component {
	constructor(args) {
		super();
	}
	delThis(number){
		$('#MultipleQuestion' + number).remove();
	}
	render(){
		return(
			<div  className="topic-cont MultipleQuestion" id={'MultipleQuestion' + this.props.number}>
				<h5><label>
				题目</label>
				<p required="required" className="question" style={{fontSize:'14px'}}></p></h5>
				<dl className="clearFix mar-t-20">
					<dt>选项</dt>
					<dd>
						<ul>
							<li><label>A</label><p required="required" className="describeA angwerCss"></p></li>
							<li><label>B</label><p required="required" className="describeB angwerCss"></p></li>
							<li><label>C</label><p required="required" className="describeC angwerCss"></p></li>
							<li><label>D</label><p required="required" className="describeD angwerCss"></p></li>
						</ul>
					</dd>
				</dl>
				<dl className="clearFix mar-t-20">
					<dt>答案</dt>
					<dd><label>
					<input type="checkbox"/>A</label><label>
					<input type="checkbox"/>B</label><label>
					<input type="checkbox"/>C</label><label>
					<input type="checkbox"/>D</label></dd>

				    {/*<a className='delete-question' onClick={()=>this.delThis(this.props.number)}><i className='icon-trash'></i></a>*/}
				</dl>
			</div>
			)
	}
}

class CourseExamine extends Component {
	constructor(args) {
		super()
		this.state = {
			radioList:[],
			checkList:[],
			course: {},
			visible:false,
			jobTree:[],
			result:false,
			singleList:[],
			multipleList: [],
			titleList:{},
			categoriesList:[],
			courseattach:[]

		}
			
	}
	componentWillMount() {
		fetch.clickCheck(this.props.params.id).then((data) => {
			let single = [],
				multiple = [];
			for (let x of data.titleList) {
				if (x.titleType === '1') {
					single.push(x);
				} else {
					multiple.push(x);
				}
			}
			this.setState({
				course: data.coursedata,
				jobTree: data.jobTree,
				titleList: data.titleList,
				singleNum: single.length,
				multipleNum: multiple.length,
				categoriesList: data.categoriesList.categoriesList,
				courseattach: data.courseattach,
				value: data.coursedata.checkReason || ''
			}, () => {
				$('#answer_time').val(data.coursedata.answerTime);
				$('#course_name').val(data.coursedata.courseName);
				$('#course_describe').val(data.coursedata.courseDesc);
				$('#course_channel').find("option[text=courseChannel]").attr("selected",true);
				$('.SingleQuestion').each(function(i) {
					$(this).find('.question').text(single[i].title);
					$(this).find('.describeA').text(single[i].A);
					$(this).find('.describeB').text(single[i].B);
					$(this).find('.describeC').text(single[i].C);
					$(this).find('.describeD').text(single[i].D);
		
		
					let answer = pub.getAnswer(single[i].answer);
					$(this).find("input[type='radio']").each((index, el) => {
						for(let x of answer){
							if(x === index){
								el.checked = true;
							}
						}
					})
		
				})
				$('.MultipleQuestion').each(function(i) {
					if(multiple[i] !== undefined){
						$(this).find('.question').text(multiple[i].title);
						$(this).find('.describeA').text(multiple[i].A);
						$(this).find('.describeB').text(multiple[i].B);
						$(this).find('.describeC').text(multiple[i].C);
						$(this).find('.describeD').text(multiple[i].D);
	
						let answer = pub.getAnswer(multiple[i].answer);
						$(this).find("input[type='checkbox']").each((index, el) => {
							for(let x of answer){
								if(x === index){
									el.checked = true;
								}
							}
						})
					}
					

				})
				let course = this.state.course;
				let jobTree = [];
				if (course.jobLevel === '' || course.jobLevel === null) {
					// jobTree.length = 0;
				} else {
					jobTree = course.jobLevel.split(',')
				}

				let flag = course.elecReqCourse === '0';
				if (this.state.course.checkState === '2') {
					$('input[type="radio"][name="result"]')[1].checked = true;
				} else {
					$('input[type="radio"][name="result"]')[0].checked = true;

					this.setState({
						result: true
					}, () => {
						$('input[type="radio"][name="elecReqCourse"]')[flag ? 0 : 1].checked = true;
					});
				}


				if (!flag) {
					this.setState({
						visible: true
					}, () => {
						for (let i in jobTree) {
							$('.check-box').find(`input[type='checkbox'][name=jobLevel${jobTree[i]}]`)[0].checked = true;
						}

					})
				}


//				this.disable();
			})

		}, (res) => {
			pub.reject(res);
		})
	}
	submit(e) {
		e.preventDefault();
		let formData = new FormData();

		let body = {};
		body.courseId = this.props.params.id;
		formData.append('courseId', body.courseId);
		body.checkState = $('input[type="radio"][name="result"]:checked').val(); //通过/不通过
		formData.append('checkState', body.checkState); //通过/不通过	

		if (body.checkState === '2' && this.refs['checkReason'].value === "") { //不通过
			message.error("不能输入空格");
			return;
		}
		formData.append('checkReason', this.refs['checkReason'].value); //审核意见
		if (body.checkState === '1') { //通过
			body.elecReqCourse = $('input[type="radio"][name="elecReqCourse"]:checked').val(); //选修0/必修1
			formData.append('elecReqCourse', body.elecReqCourse); //选修/必修
			if (body.elecReqCourse !== '1') {
				body.studyIntegral = this.refs['studyIntegral'].value; //学习积分
				if (body.studyIntegral < 0) {
					message.error("学习积分不能为负数");
					return;
				}
				formData.append('studyIntegral', body.studyIntegral);
			}

			if ($('input[type="radio"][name="elecReqCourse"]:checked').val() === '1') {
				let num = 0;
				let jobLevel = '';
				$('.check-box').find("input[type='checkbox']:checked").each((index, el) => {
					// formData.append('jobLevel', el.value);
					jobLevel += `${el.value},`;
					num++;
				})
				if (num === 0) {
					message.error('请选择必修职级', 3);
					return;
				} else {
					jobLevel = jobLevel.slice(0, jobLevel.length - 1);
					formData.append('jobLevel', jobLevel); //必修课程
				}
			}
		}
		fetch.checkCourse(formData).then((data) => {
			pub.jumpHistory.push('/admin/CourseManage');
		}, (res) => {
			pub.reject(res);
		})


	}
	show(flag) {
		this.setState({
			visible: flag
		})
	}
	result(flag) {
		this.setState({
			result: flag
		})
	}
	numberInputs = (e) => {
		let value = e.target.value;
		e.target.value = value.replace(/[@#%&{}?/><[()（）【】{}《》'“‘”’]+/g, '');
	}
	changeValue() {
		this.setState({
			value: this.refs.checkReason.value
		})
	}
	render() {
		let course = this.state.course;
		return (
			<div className="container">
				<div className="common-title">课程审核
				</div>
				
				<div className="video-container bg-FFFFFF box-shadow clearFix">
					<div className="video-box">
						<video src={course.coursevideoPath}
						 controls="controls"  width="550" height="315" 
						  preload="auto">
							您的浏览器不支持 video 标签。
						</video>
					</div>
					<div className="v-info">
						<div className="v-cont">
						    <h3>&lceil;<span>{course.userRealName}</span>&rfloor;<span>{course.courseName}</span></h3>
					         <div>{pub.formatTimestamp(course.createTime)}</div>
							 <h3><span>课程介绍</span></h3>
							<p className='shorthand'>{course.courseDesc?(course.courseDesc):'没有描述'}</p>
						</div>
					<div className="enclosure">
						<h3>课程附件</h3>
						<ul>
						    {this.state.courseattach.map((attach,index)=>{
						    	return(
						    		   <a key={index} download={attach.courseattachUniquene} href={pub.getFile(attach.courseattachUniquene)}>{attach.courseAttrachPath}</a>
						    		)
						    })}
						</ul>
					</div>
					</div>
				</div>

			<div className="row bg-FFFFFF box-shadow mar-t-20 pad-l-20 pad-r-20">

					<h3 style={{borderBootm:'1px solid #dee6f4',padding:'10px'}} className="mar-b-20">课程范围</h3>
					<div className="range">
						<label>课程渠道：
							{pub.courseChannel.map((type,index)=>{
								return(
									<div key={index}>{course.courseChannel === index.toString()?<span>{type}</span>:null}</div>
								)
							})}
								{/*<Switch condition={course.courseChannel}>
									    {pub.courseChannel.map((type,index)=>{
									    	return(
									    		<Case key={index} value={index.toString()}><span>{type}</span></Case>
									    		)
									    })}
									    <Default><span>未知</span></Default>
								</Switch>*/}
						</label>
						<label>课程分类：
						{
							this.state.categoriesList.map((type,index)=>{
								return(
									<div key={index}>{course.courseType === type.code?<span>{type.name}</span>:null}</div>	
								)
						})}
						</label>
					</div>

					<h3 style={{borderBottom:'1px solid #DEE6F4',padding:'10px'}} className="mar-b-20">课程考题</h3>
					{
						this.state.singleNum !== 0 ?
							<div className="topic radio-topic mar-b-20">
							    <h3>单项选择题：</h3>
							  {/* {this.state.singleList.map((item,index)=>{
							    	return(
							  	       <dl key={index}>
							  	       	<dt>{index + 1}、{item.title}</dt>
							  	       	<dd><label><input type="radio" name={"radio" + index} disabled="disabled"/>A.{item.A}</label></dd>
							  	       	<dd><label><input type="radio" name={"radio" + index} disabled="disabled"/>B.{item.B}</label></dd>
							  	       	<dd><label><input type="radio" name={"radio" + index} disabled="disabled"/>C.{item.C}</label></dd>
							  	       	<dd><label><input type="radio" name={"radio" + index} disabled="disabled"/>D.{item.D}</label></dd>
							  	       </dl>
							    		)
							   })}*/}
							   {pub.getObject(this.state.singleNum).map((item,index)=>{
									return(
										  	<SingleQuestion key={index} number={index + 1}/>
										)
								})}
							</div>
						:null	
					}
					{
						
						this.state.multipleNum !== 0 ?
							<div className="topic check-topic">
							    <h3>多选选择题：</h3>
							   { /*{this.state.multipleList.map((item,index)=>{
							  	return(
								       <dl key={index}>
								       	<dt>{index + 1}、{item.title}</dt>
								       	<dd><label><input type="checkbox" disabled="disabled"/>A.{item.A}</label></dd>
								       	<dd><label><input type="checkbox" disabled="disabled"/>B.{item.B}</label></dd>
								       	<dd><label><input type="checkbox" disabled="disabled"/>C.{item.C}</label></dd>
								       	<dd><label><input type="checkbox" disabled="disabled"/>D.{item.D}</label></dd>
								       </dl>
							  		)
							  })}*/}
							    {pub.getObject(this.state.multipleNum).map((item,index)=>{
									return(
										  	<MultipleQuestion key={index} number={index + 1}/>
										)
								})}
							</div>
						:null
					}
					

					<h3 style={{borderBottom:'1px solid #DEE6F4',padding:'10px'}} className="mar-b-20">审核结果</h3>
					<form onSubmit={(e)=>this.submit(e)}>
					<div className="topic mar-b-20">
						<dl>
							<dt>审核结果</dt>
							<dd>

							  <label><input onClick={()=>this.result(true)} type="radio" required="required" name="result" value="1"/>通过</label>
							  <label><input onClick={()=>this.result(false)} type="radio" required="required" name="result" value="2"/>不通过</label>

							  {this.state.result && !this.state.visible?<label><span style={{color:'red'}}>*</span>学习积分：<input onKeyUp={this.numberInputs} defaultValue={course.studyIntegral} required="required" ref='studyIntegral'/></label>:null}
							  </dd>
						</dl>

						{this.state.result?
						<dl>
							<dt>课程级别</dt>
							<dd>
							  <label><input onClick={()=>this.show(false)} type="radio" required="required" name="elecReqCourse" value="0"/>选修</label>
							  <label><input onClick={()=>this.show(true)} type="radio" required="required" name="elecReqCourse" value="1"/>必修</label>
							</dd>
						</dl>
						:null}

						{this.state.visible&&this.state.result?
					     <div className="pop-box-1" style={{paddingBottom:'0px'}}>
						   <div className="check-box" style={{height:'auto'}}>
						    {this.state.jobTree.map((job,index)=>{
						    	return( 
						    		    <label key={index} id="job_Tree"><input type="checkbox" name={'jobLevel'+job.jobCode} value={job.jobCode} />{job.jobName}</label>
						    		)
						    })}
				           </div>
			            </div>
			            :
			           null
			            }
						<dl>
							<dt><span style={{color:'red'}}>*</span>审核意见</dt>
							<dd><textarea required={!this.state.result} value={this.state.value}   ref="checkReason" onKeyUp={this.numberInputs} onChange={this.changeValue.bind(this)}></textarea></dd>
						</dl>
			            

					</div>
					<div className="row submit-btn mar-b-20 mar-t-20 text-center">
						<a className="btn btn-blue" onClick={()=>{window.history.back();}}>取消</a>
						<button className="btn btn-blue">确定</button>
					</div>
					</form>

			</div>

{/*			<Layer
				title = "请选择必修职级"
				show={this.state.visible}
				hide={(e)=>{this.setState({visible:false})}}
				width="600px"
				height="300px"
			>
			<div className="row">
					<div className="pop-box-1">
						<div className="check-box">
						    {this.state.jobTree.map((job,index)=>{
						    	return( 
						    		    <label key={index}><input type="checkbox" value={job.jobCode} />{job.jobName}</label>
						    		)
						    })}
				       </div>
			       </div>
			<div className="pop-btn">
				<a onClick={(e)=>{this.setState({visible:false})}} className="btn btn-grey layui-layer-close">取消</a>
				<a onClick={(e)=>{this.setState({visible:false})}} className="btn btn-blue">确定</a>
			</div>

		</div>
			</Layer>*/}

			</div>

		)
	}

}
export default CourseExamine

